<template>
    <el-card>
        <template #header>
            <el-button type="primary" plain @click="showAddDialog">添加学生</el-button>
        </template>
        <el-table :data="students" style="width: 100%">
            <el-table-column label="账号" prop="username"></el-table-column>
            <el-table-column label="密码" prop="password">*****</el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="text" @click="showEditDialog(row)">编辑</el-button>
                    <el-popconfirm title="确认删除吗?" @confirm="removeStudent(row)" confirm-button-text="确认"
                        cancel-button-text="取消">
                        <template #reference>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
            <el-form :model="currentStudent" ref="studentForm" :rules="rules" label-width="80px">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="currentStudent.username" :disabled="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="currentStudent.password" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveStudent">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import {
    getStudentList,
    addStudent,
    updateKey,
    delStudentList,
} from '@/api/student';

onMounted(() => {
    getStudentList().then((res) => {
        students.value = res.data.data;
    });
});

const students = ref([]);
const studentForm = ref(null);
const dialogVisible = ref(false);
const isEdit = ref(false);
const currentStudent = reactive({ username: '', password: '' });
const dialogTitle = ref('');
const rules = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码不能少于6位', trigger: 'blur' },
        { max: 12, message: '密码不能大于12位', trigger: 'blur' },
    ],
};

const showAddDialog = () => {
    isEdit.value = false;
    currentStudent.username = '';
    currentStudent.password = '';
    dialogTitle.value = '添加学生';
    dialogVisible.value = true;
};

const showEditDialog = (student) => {
    isEdit.value = true;
    currentStudent.username = student.username;
    currentStudent.password = student.password;
    dialogTitle.value = '编辑学生';
    dialogVisible.value = true;
};

const saveStudent = () => {
    studentForm.value.validate((valid) => {
        if (valid) {
            if (isEdit.value) {
                // 编辑学生
                updateKey(currentStudent);
                const index = students.value.findIndex(
                    (s) => s.username === currentStudent.username
                );
                students.value[index].password = currentStudent.password;
                ElMessage({
                    message: '更新成功',
                    type: 'success',
                });
            } else {
                // 添加学生
                addStudent({
                    username: currentStudent.username,
                    password: currentStudent.password,
                })
                    .then(() => {
                        students.value.push({
                            username: currentStudent.username,
                            password: currentStudent.password,
                        });
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        });
                    })
                    .catch(() => {
                        ElMessage({
                            message: '添加失败',
                            type: 'error',
                        });
                    });
            }
            dialogVisible.value = false;
        } else {
            // 校验不通过
            return false;
        }
    });
};

const removeStudent = (student) => {
    console.log('student', student.username);
    delStudentList(student.username);
    const index = students.value.indexOf(student);
    students.value.splice(index, 1);
    ElMessage({
        message: '删除成功',
        type: 'success',
    });
};
</script>

<style>
.dialog-footer {
    text-align: right;
}
</style>
